@use "../ui/vars" as *;

.page-content-container.settings {
  display: block;
  max-width: 60em;
  width: min(90vw, 40em);
  margin: auto;
  padding: 1rem;

  .field-group {
    margin: 2rem 0;

    ul {
      padding: 0;

      li {
        display: grid;
        grid-template-columns: 1fr 5em;
        margin: 2em 0;

        h4 {
          font-weight: 600;
        }
        span {
          font-size: 0.8rem;
          grid-column: 1/2;
          line-height: 1.2em;
          padding-top: 0.3em;
        }

        .loading,
        .switch {
          justify-self: end;
          grid-column: 2/3;
          grid-row: 2/3;
          align-self: center;
        }

        button {
          font-size: 0.8rem;
          padding: 0.5rem 1rem;
          height: max-content;
          width: max-content;
          justify-self: end;
          align-self: end;
          grid-column: 2/3;
          grid-row: 1/3;
          border: 1px solid var(--text-primary);
          border-radius: var(--elem-radius);
          color: var(--text-link);
        }

        button[disabled] {
          border: 1px solid var(--text-secondary);
          background-color: var(--background-secondary);
          color: var(--text-secondary);
        }
      }
    }
  }
}
